<template>
	<view class="container box">
		<view class="" v-if="token!==''">
			<view style="height: auto;">
				<view class="list">
					<text>頭像</text>
					<view class="img">
						<u-upload name="file" @afterRead="afterRead" @delete="deletePic" class="upload"
							:deletable="true" previewImage :fileList="fileList" :maxCount="1"></u-upload>
					</view>
				</view>
				<view class="list">
					<text>暱稱</text>
					<input type="text" v-model="nickname" placeholder="請輸入昵稱">
				</view>
				<view class="list">
					<text>手機號</text>
					<input type="number" disabled="true" v-model="userInfo.mobile" placeholder="請輸入手機號">
				</view>
				<view class="list" @tap="showSex=true">
					<text>性別</text>
					<input style="width: 50rpx;" type="text" v-model="sex" placeholder="請輸入性別">
				</view>
				<u-picker :show="showSex" @confirm="confirmSex" :columns="columns" @close="showSex=false"
					@cancel="showSex=false" :closeOnClickOverlay="true" keyName="value"></u-picker>

				<view class="list" @tap="show=true">
					<text>出生日期</text>
					<view class="birthday" :class="{active:birthday!=='請選擇出生日期'}">{{birthday}}</view>
				</view>
				<u-datetime-picker :show="show" v-model="value1" @confirm="confirmDate" @cancel="show=false"
					@close="show=false" :closeOnClickOverlay="true" mode="date"
					:minDate="158750000000"></u-datetime-picker>
				<!-- 
				<view class="list">
					<text>會員等級</text>
					<input type="text" :value="userInfo.vip_name" disabled="true">
				</view> -->
				<view class="list">
					<text>會員卡號</text>
					<input type="number" :value="userInfo.vip_number" disabled="true">
				</view>
				<view class="list">
					<text>個性簽名</text>
					<u--textarea v-model="personal_signature"
						style="width: 100%;box-sizing: border-box;margin-top: 30rpx;border-radius: 16rpx;"
						maxlength="20" placeholder="請輸入內容" count></u--textarea>
				</view>
			</view>

			<view class="">
				<u-button @click="save_userInfo" text="保存" class="custom-style"></u-button>
			</view>
		</view>

		<view class="go_login" v-else @tap="go_login">
			檢測還沒登録，前往登録
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserInfo,
		delImage
	} from '@/api/me.js'
	import baseURL from '@/utils/baseURL.js'

	export default {
		data() {
			return {
				userInfo: "",
				fileList: [],
				nickname: "",
				sex: "",
				birthday: "請選擇出生日期",
				personal_signature: "",
				token: "",
				avatar: "",
				showSex: false,
				columns: [
					[{
							id: 1,
							value: '男'
						},
						{
							id: 2,
							value: '女'
						}
					]
				],
				show: false,
				value1: Number(new Date())
			};
		},
		onLoad() {
			this.token = uni.getStorageSync('ONEtoken')

			getUserInfo().then(res => {
				console.log(res.data, "用戶信息")
				this.userInfo = res.data
				// console.log(this.userInfo,"用戶信息")

				if (this.userInfo.avatar) {
					this.fileList.push({
						url: baseURL + this.userInfo.avatar
					})
				}


				this.nickname = this.userInfo.nickname
				this.sex = this.userInfo.sex == 1 ? '男' : '女'
				this.birthday = this.userInfo.birthday ? this.userInfo.birthday : '請選擇出生日期'
				this.personal_signature = this.userInfo.personal_signature
			})
		},
		onShow() {

		},
		methods: {
			save_userInfo() {
				updateUserInfo({
					avatar: this.avatar,
					nickname: this.nickname,
					sex: this.sex == "男" ? "1" : "2",
					birthday: this.birthday,
					personal_signature: this.personal_signature,
				}).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: 'success'
					})
				})
			},
			afterRead(event) {
				this.fileList.push({
					url: event.file.url
				})
				// console.log(this.fileList, "圖片列表")
				console.log(event, "圖片")

				uni.uploadFile({
					url: this.env + "/ajax/upload",
					filePath: event.file.url,
					name: "file",
					success: (res) => {
						this.avatar = JSON.parse(res.data).data.url
						// console.log(this.avatar,"上傳成功")
					}
				})

			},
			deletePic(event) {
				console.log(event)
				delImage({
					// url:  this.avatar
					url: event.file.url
				}).then(res => {
					console.log(res, '刪除圖片')
				})
				this.fileList = []
			},
			go_login() {
				uni.navigateTo({
					url: "/pages/login_register/login_register?flag=0"
				})
			},
			confirmSex(e) {
				// console.log(e)
				this.sex = e.value[0].value
				this.showSex = false
			},
			confirmDate(e) {
				console.log(e)
				let a = new Date(e.value)
				let y = a.getFullYear()
				let m = a.getMonth() + 1 < 10 ? '0' + (a.getMonth() + 1) : a.getMonth() + 1
				let d = a.getDate()
				this.birthday = y + '-' + m + '-' + d
				this.show = false
			}
		}
	}
</script>

<style lang="less">
	.box {
		box-sizing: border-box;
	}

	.container {
		padding: 14rpx 40rpx;

		.list {
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 18rpx;
			border-bottom: 1rpx solid #F2F2F2;
			margin-bottom: 14rpx;

			text {
				font-size: 28rpx;
			}

			.img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				// background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload {
					// margin: 10rpx 0 0 10rpx;
				}
			}

			.birthday {
				color: #ccc;
			}

			.active {
				color: #000;
			}

			input {
				text-align: end;
			}

			&:last-child {
				flex-direction: column;
				align-items: flex-start;
				border: none;
				height: auto;

				textarea {
					margin-top: 30rpx;
					width: 100%;
					// height: 200rpx;
					background: rgba(153, 153, 153, 0.14)
				}
			}


		}
	}

	/deep/ .uni-textarea-wrapper {
		overflow: visible;
		min-height: 200rpx;
		// padding: 10rpx 16rpx;
	}

	.save {
		width: 168rpx;
		height: 53rpx;
		background: #39B19D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #39B19D;
		color: #fff;
		line-height: 53rpx;
		text-align: center;
		margin: 55rpx auto;
	}

	.custom-style {
		background: #39B19D;
		color: #fff;
	}

	// /deep/ .u-upload__wrap__preview{
	// 	width: 88rpx;
	// 	height: 88rpx;
	// 	display: none;
	// }
	/deep/ .u-upload__button {
		width: 88rpx !important;
		height: 88rpx !important;
		border-radius: 50%;
		// display: none;
	}

	/deep/ .u-upload__wrap__preview__image {
		width: 88rpx !important;
		height: 88rpx !important;
		border-radius: 50%;
	}

	.go_login {
		padding: 10rpx 30rpx;
		// display: inline-block;
		margin: 30rpx auto;
		text-align: center;
		background: #39B19D;
		border-radius: 16rpx;
		color: white;
	}
</style>